<template>
	<div class="content">
		<h2><i class="iconfont icon-yishangjia1"></i>商品管理</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search">
				<!--按关键字分类(商品id，商品编号，商品标题)-->
				<div class="search__list">
					<div class="search__list--title search__list--title-tip">审核状态</div>
					<el-select  size="mini" v-model="params.onShief" @change="fetchGoodsData">
						<el-option label="全部" :value="''"></el-option>
						<el-option label="已上架" :value="1"></el-option>
						<el-option label="未上架" :value="0"></el-option>
					</el-select>
				</div>
				<div class="search__list">
					<div class="search__list--title">是否为点分商品</div>
					<el-select  size="mini" v-model="params.is_fen" @change="fetchGoodsData">
						<el-option label="一般商品" :value="0"></el-option>
						<el-option label="点分商品" :value="1"></el-option>
					</el-select>
				</div>
				<!--按商品类型来进行分类-->
				<div class="search__list cascader">
					<div class="search__list--title">商品分类</div>
					<s-cascader @getclassify="handleClassify"></s-cascader>
				</div>
				<div class="search__list">
					<div class="search__list--title">关键字</div>
					<el-input placeholder="商品描述" size="mini" v-model="params.commodity_name" clearable></el-input>
				</div>
				<div class="search__list">
					<el-button size="mini" type="primary" icon="el-icon-search" @click="fetchGoodsData">搜索</el-button>
				</div>
				<div class="search__list">
					<el-button size="mini" type="success" @click="uploadMultiGoods">批量上架</el-button>
				</div>
				<div class="search__list">
					<el-button size="mini" type="danger" @click="removeMultiGoods">批量下架</el-button>
				</div>
			</div>
			<!--商品展示表格-->
			<div v-loading="loading">
				<el-table :data="allGoods" strip @selection-change="handleSelect" size="mini">
					<el-table-column type="selection"></el-table-column>
					<el-table-column label="商品描述" prop="commodity_name" width="350">
						<template slot-scope="scope">
							<div class="img-desc">
								<img :src="scope.row.mainimg.url" alt="" v-if="scope.row.mainimg" class="img-desc__img"/>
								<span class="img-desc__desc">{{scope.row.commodity_name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="吊牌价格" prop="price.price">
						<template slot-scope="scope">
							<span v-if="scope.row.price">{{scope.row.price.price}}元</span>
						</template>
					</el-table-column>
					<el-table-column label="上架日期" prop="price.price" width="150" >
						<template slot-scope="scope">
							<span v-if="scope.row.onshief_time">{{ scope.row.onshief_time | formatTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="库存" prop="stocks"></el-table-column>
					<el-table-column label="商品状态" prop="price.price">
						<template slot-scope="scope">
							<el-tag size="small" type="success" v-if="scope.row.onshief_time">已上架</el-tag>
							<el-tag size="small" type="danger" v-else>已下架</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="250">
						<template slot-scope="scope">
							<el-button 
								v-if="scope.row.offshief_time"
								size="mini" 
								type="success" 
								@click="uploadGoods(scope.row.commodity_id)">
								上架
							</el-button>
							<el-button 
								v-if="scope.row.onshief_time"
								size="mini" 
								type="danger" 
								@click="removeGoods(scope.row.commodity_id)">
								下架
							</el-button>
							<el-button
								v-if="scope.row.is_show_in_app == 1"
								type="primary"
								size="mini"
								@click="setIsShowInApp(scope.row.commodity_id, 0)">
								隐藏
							</el-button>
							<el-button
								v-else
								type="primary"
								size="mini"
								@click="setIsShowInApp(scope.row.commodity_id, 1)">
								显示
							</el-button>
							<el-button size="mini" @click="showGoodsDetail(scope.row.commodity_id)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next, jumper" :total="totalNum" class="fr"></el-pagination>
			<s-model :isShow="showModel" :id="commodity_id" @closeModel="showModel=false"></s-model>
		</div>
	</div>
</template>

<script>
	import model from "./goods_detail.vue"
	export default {
		created() {
			this.fetchGoodsData();
		},
		components: {
			"s-model": model
		},
		data() {
			return {
				/*请求参数*/
				params: {
					onShief: "",						//上架状态，0代表未上架，1代表已上架，空代表全部
					fields: "price,mainimg,bigimgs",	//额外的数据请
					page: 1,							//页数默认为1
					rows: 10,							//一页默认显示为10个
					commodity_name: "",					//商品名(用于搜索)
					provider_id: 1,						//商家类型，1代表天点自营
					is_fen: 0,							//是否为点分商品
					cateids: ""							//从服务器获取到的商品分类的值
				},
				/*选中的商品*/
				selectGoods: [],			//选中的等待批量上传的商品(没有选中时，会返回一个空数组)
				/*已上架商品*/
				allGoods: null, 			//等待上传商品
				commodity_id: "",			//商品id
				totalNum: 0,				//返回数据总数，用于分页那里显示
				/*其他参数*/
				agreeMultiply: true,		//是否同意批量上下架，只能批量上架一种状态，要不全部上架的商品，要不就是全部下架的商品
				agreeOnShief: false,		//是否允许上架
				agreeOffShief: false,		//是否允许下架
				showModel: false,			//显示详情
				loading: true				//加载小圈圈
			}
		},
		methods: {
			//====================================数据获取(与后台交互)===============================//
			/*向后台请求(待上架)商品数据*/
			fetchGoodsData() {
				var url = `${this.url}/commodity/item_get_list.action`;
				var params = this.params;
				this.loading = true;
				this.$http.get(url,{ params }).then((res, err) => {
					if( res.data.success ) {
						this.loading = false;
						this.allGoods = res.data.result.rows;
						this.totalNum = res.data.result.total;//获取分页个数
					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			/*商品进行批量选择时触发row代表选择的那一行的所有数据(和服务器数据吻合)*/
			handleSelect(row) {
				this.agreeOnShief = false;
				this.agreeOffShief = false;
				this.agreeMultiply = true;
				this.selectGoods = row;
				this.selectGoods.forEach((goods) => {
					if ( goods.offshief_time ) {
						this.agreeOffShief = true;
					}else {
						this.agreeOnShief = true;
					}
				});
				this.agreeOnShief && this.agreeOffShief ? this.agreeMultiply = false : this.agreeMultiply = true;
			},
			/*商品下架(单个和批量下架)*/
			removeGoods(ids){
				if (typeof ids === "number") ids = String(ids);
				var url = `${this.url}/commodity/item_offshielf.action`;
				var params = { token: "3960c4db11d44c018898258d63d95bd0", ids }
				this.$http.get(url,{ params }).then((res) => {
					if( res.data.success ) {
						this.loading = true;
						this.fetchGoodsData();
					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			/*商品批量下架*/
			removeMultiGoods() {
				if ( !this.agreeMultiply ) {
					this.$message({
						message: "您选择的商品含有已经下架的，请重新选择",
						type: "warning"
					});
				}else if ( this.agreeOffShief ) {
					this.$message({
						message: "商品已经下架了",
						type: "warning"
					});
				}else if ( this.selectGoods.length <= 0 ) {
					this.$message({
						message: "请至少选择需一个要上传的商品",
						type: "warning"
					});
				}else {
					var ids = this.selectGoods.map( (val) => { return val.commodity_id; } ).join(",");
					this.removeGoods(ids);

				}
			},
			/*商品上架(单个和批量上架)*/
			uploadGoods(ids) {
				if (typeof ids === "number") ids = String(ids);
				var url = `${this.url}/commodity/item_onshielf.action`;
				var params = { token: "3960c4db11d44c018898258d63d95bd0", ids }
				this.$http.get(url,{ params }).then((res) => {
					if( res.data.success ) {
						this.loading = true;
						this.fetchGoodsData();
					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			/*多个商品上架*/
			uploadMultiGoods() {
				if ( !this.agreeMultiply ) {
					this.$message({
						message: "您选择的商品含有已经上架的，请重新选择",
						type: "warning"
					});
				}else if ( this.agreeOnShief ) {
					this.$message({
						message: "商品已经上架了",
						type: "warning"
					});
				}else if( this.selectGoods.length <= 0 ) {
					this.$message({
						message: "请至少选择需一个要上传的商品",
						type: "warning"
					});
				}else {
					var ids = this.selectGoods.map( (val)=>{ return val.commodity_id; } ).join(",");
					this.uploadGoods(ids);
				}
			},
			//================================获取不同的查询条件==================================//
			/*获取到商品分类的值*/
			handleClassify(val) {
				this.params.cateids = val.join(",");
				this.fetchGoodsData();
			},
			/*是否满足搜索条件*/
			searchGoods() {
				this.fetchGoodsData();
			},
			//====================================其他请求=======================================//
			/*查看商品详情*/
			showGoodsDetail(id) {
				this.showModel = true;
				this.commodity_id = id;
			},
			/*翻页时候向后台发送请求，page代表第几页*/
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.fetchGoodsData();
			},
			setIsShowInApp(commodity_id, is_show_in_app) {
				this.loading = true;
				var url = `${this.url}/commodity/item_set_is_show_in_app.action`;
				var params = {
					commodity_id: commodity_id,
					is_show_in_app: is_show_in_app
				};
				this.$http.get(url,{ params }).then((res)=> {
					this.loading = false;
					if( res.data.success ) {
						this.fetchGoodsData();
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">

</style>